<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/paint-friend.css">
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/iconfont.css"/>
    <script src="js/jquery-1.12.4.min.js"></script>
    <!--<script src="js/paint-friend.js"></script>-->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/iconfont.js"></script>
    <!--<script type="text/javascript" src="js/index.js"></script>-->
    <style type="text/css">
        body {
            background: #f6f9fa;
        }

        .nav > li > a {
            padding: 4px 5px;
        }

        header {
            background: white;
            height: 50px;
        }

        #ul {
            margin-top: 13px;
        }

        #ul > li > a {
            color: black;
            font-size: 10px;
        }

        .span {
            margin: -8px;
            background: white;
            margin-top: -4px;
        }

        #span {
            color: #5BC0DE;
        }

        .nav > li > a:hover {
            background: white;
        }

        #sc {
            width: 200%;
            background: #f4f4f4;
        }

        #button {
            margin-left: 147px;

        }

        #button > span {
            color: #999;
        }

        #login {
            margin-top: 6px;
        }

        #img {
            margin-top: 9px;
        }

        #li {
            width: 68px;
            height: 57px;
            margin-top: -16px;
            margin-left: 13px;
            background: #f45a8d;
            border-radius: 5px;
        }

        #a {
            text-align: center;
            margin-top: 17px;
            background: #f45a8d;
        }

        .sc2 {
            width: 439px;
            margin-left: -34px;
            height: 40px;
            margin-top: 46px;
        }

        .button2 {
            margin-left: -34px;
            width: 439px;
            height: 40px;
        }

        #message {
            font-size: 1.2rem;
            color: #B54735;
            text-align: center;
        }

        #title {
            width: 980px;
            height: 28px;
            margin: 0 auto;
            border-bottom: 1px solid #ddd;
            margin-top: 28px;
            text-align: center;
        }

        #tit {
            height: 56px;
            line-height: 56px;
            margin: 0 auto;
            padding: 0 20px;
            font-size: 40px;
            background: #fff;
            text-align: center;
        }

        #selectMe {
            width: 14px;
            height: 14px;
        }

        #p {
            font-size: 12px;
            padding-top: 3px;
        }

        #p > a {
            color: #00a1d6;
            text-decoration: none;
        }

        #btn {
            position: absolute;
            margin-left: 245px;
            margin-top: -40px;
            height: 40px;
            width: 159px;
            background-color: #00a1d6;
            border-color: #00a1d6;
            color: white;
        }

        #out {
            margin-left: 274px;
        }

        #out > a {
            text-decoration: none;
            color: #00a1d6;
        }

        #checktext1,
        #checktext2,
        #checktext3,
        #checktext4 {
            margin-left: 434px;
            position: absolute;
            margin-top: -27px;
            font-size: 10px;
            color: #f45d90;
        }
    </style>
</head>
<body>
<header>
    <div class="container">
        <!--前-->
        <ul class="nav nav-pills navbar-nav" id="ul">
            <li class="span"><a href="new_file.html">
                <span class="iconfont icon-bilibilidonghua"></span>
            </a></li>
            <li><a href="#">主站</a></li>
            <li><a href="#">游戏中心</a></li>
            <li><a href="#">直播</a></li>
            <li><a href="#">会员购</a></li>
            <li><a href="#">漫画</a></li>
            <li><a href="#">赛事</a></li>
            <li><a href="#">BML</a></li>
            <li><a href="#">
                <span id="span" class="glyphicon glyphicon-phone"></span>
                下载APP</a></li>

        </ul>

        <!-- 搜索框-->
        <form class="navbar-form  navbar-left" action="" method="post">
            <div class="form-group">
                <input type="text" id="sc" class="form-control" placeholder="请输入要找的类容"/>
            </div>
            <div class="form-group">
                <button id="button" class="btn btn-link" style="outline: none;border: none;">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </div>
        </form>

        <!--后-->
        <div class="nav navbar-nav navbar-left" id="img">
            <a href="#">
                <img src="img/akari.jpg" style="height: 32px;"/>
            </a>
        </div>
        <ul class="nav navbar-nav navbar-left" id="ul">
            <li><a href="#">动态</a></li>
            <li><a href="#">历史</a></li>
            <li><a href="#">常做中心</a></li>
            <li id="li">
                <a href="#" id="a" style="color: white;">投稿</a>
            </li>
        </ul>
        <!---->
    </div>
</header>
<!---->
<div style="margin-top: -5px;">
    <div style="height: 90px;background: #00a0d8;">
        <div class="container">
            <img src="img/rl_top.35edfde.png"/>
        </div>
    </div>
    <div style="height:640px;background: white;">
        <div class="container">
            <!--title-->
            <div class="row">
                <div id="title">
                    <span id="tit">注册</span>
                </div>
            </div>
            <!---->
            <!--修改框-->
            <div class="row" style="margin-top: -49px;">
                <div class="col-md-12 col-md-offset-4" style="margin-top: 70px;">
                    <!--<form action="#" method="get" onsubmit="return check()">-->
                        <div id="app">
                            <!--昵称-->
                            <div class="form-group">
                                <input type="text" name="name" id="username" class="form-control sc2"
                                       placeholder="昵称"
                                       onchange="checkusrn()"/>
                                <span id="checktext1"></span>
                            </div>
                            <!---->
                            <!--密码-->
                            <div class="form-group">
                                <input type="password" v-model="password" id="password" name="password"
                                       class="form-control sc2"
                                       placeholder="新密码：6～16位字符，区分大小写" onchange="checkusrn()"/>
                                <span id="checktext2"></span>
                            </div>
                            <!---->
                            <!--手机号-->
                            <div class="form-group">
                                <input type="text" name="phone" id="phone" class="form-control sc2"
                                       placeholder="填写常用的手机号" onchange="checkusrn()"/>
                                <span id="checktext3"></span>
                            </div>
                            <!---->
                            <!--验证码-->
                            <div class="form-group">
                                <input type="text" name="" id="font" placeholder="请输入短信验证码" class="form-control sc2"
                                       onchange="checkusrn()"/>
                                <button type="button" class="btn" id="btn">
                                    点击获取
                                </button>
                                <span id="checktext4"></span>
                            </div>
                            <!---->
                            <!--协议-->
                            <div class="form-group" style="margin-left: -11px;margin-top: 23px;">
                                <label class="checkbox">
                                    <input type="checkbox" id="selectMe"/>
                                </label>
                                <p id="p">我已同意
                                    <a href="#">《哔哩哔哩弹幕用户使用协议》</a>
                                    和
                                    <a href="#">《哔哩哔哩隐私政策》</a>
                                </p>
                            </div>
                            <!---->
                            <!--注册按钮-->
                            <div class="form-group">
                                <button class="btn button2" id="next" disabled="disabled">注册</button>
                            </div>
                            <!---->
                            <!--返回登陆-->
                            <div id="out">
                                <a href="blibli_login.html">已有账号，直接登陆></a>
                            </div>
                            <!---->
                        </div>
                    <!--</form>-->
                </div>
                <!---->
            </div>
        </div>
    </div>
    <footer>
        <div class="foot_top clearfix">
            <div class="bilibili">
                <p>bilibili</p>
                <div class="about clearfix">
                    <ul>
                        <li><a href="###">关于我们</a></li>
                        <li><a href="###">联系我们</a></li>
                    </ul>
                    <ul>
                        <li><a href="###">友情链接</a></li>
                        <li><a href="###">加入我们</a></li>
                    </ul>
                    <ul>
                        <li><a href="###">哔哩哔哩周边</a></li>
                        <li><a href="###">官方认证</a></li>
                    </ul>
                </div>
            </div>
            <div class="fast_link">
                <p>传送门</p>
                <div class="about clearfix">
                    <ul>
                        <li><a href="###">帮助中心</a></li>
                        <li><a href="###">侵权申诉</a></li>
                        <li><a href="###">用户反馈论坛</a></li>
                    </ul>
                    <ul>
                        <li><a href="###">高级弹幕</a></li>
                        <li><a href="###">分院帽计划</a></li>
                        <li><a href="###">壁纸站</a></li>
                    </ul>
                    <ul>
                        <li><a href="###">活动专题页</a></li>
                        <li><a href="###">活动中心</a></li>
                        <li><a href="###">名人堂</a></li>
                    </ul>
                </div>
            </div>
            <div class="focus clearfix">
                <a href="###">
                    <dl>
                        <dt class="focus_pic phone"></dt>
                        <dt class="code_pic phone_code"></dt>
                        <dd class="focus_pro">手机端下载</dd>
                    </dl>
                </a>
                <a href="###">
                    <dl>
                        <dt class="focus_pic sina"></dt>
                        <dt class="code_pic sina_code"></dt>
                        <dd class="focus_pro">新浪微博</dd>
                    </dl>
                </a>
                <a href="###">
                    <dl>
                        <dt class="focus_pic official"></dt>
                        <dt class="code_pic wechat_code"></dt>
                        <dd class="focus_pro">官方微信</dd>
                    </dl>
                </a>
            </div>
        </div>
        <div class="foot_bottom clearfix">
            <div class="cooper"><img src="img/index/cooper.png" alt=""></div>
            <div class="foot_info">
                <p>广播电视节目制作经营许可证：（沪）字第1248号 | 网络文化经营许可证：沪网文[2013]0480-056号 | 信息网络传播视听节目许可证：0910417 |
                    互联网ICP备案：沪ICP备13002172号-3 沪ICP证：沪B2-20100043 | 违法不良信息举报邮箱：help@bilibili.com |
                    违法不良信息举报电话：4000233233转3</p>
                <p>网上有害信息举报专区： <a href="###">中国互联网违法和不良信息举报中心</a> | <a href="###">上海互联网举报中心</a> | <a href="###">12318
                    全国文化市场举报网站</a></p>
            </div>
        </div>
    </footer>
</div>
</body>
>
<script type="text/javascript">
    $(function () {
        $("#selectMe").click(function () {
            var obj = $("#next").get(0);
            obj.disabled = !$("#selectMe")[0].checked;
            if ($("#selectMe")[0].checked == true) {
                $("#next").css("background-color", "#0092C2")
                $("#next").css("color", "white")
            } else {
                $("#next").css("background-color", "")
                $("#next").css("color", "")
            }
        });
    });
</script>
<script type="text/javascript">
    //昵称
    function checkusrn() {
        var check = false;
        var username = document.getElementById("username").value;
        if (username == "") {
            document.getElementById("checktext1").innerHTML = "请告诉我你的昵称吧";
            check = false;
        } else if (username.length > 10) {
            document.getElementById("checktext1").innerHTML = "昵称过长";
            check = false;
        } else {
            document.getElementById("checktext1").innerHTML = "";
            check = true;
        }

        //密码
        var password = document.getElementById("password").value;
        if (password.length < 6) {
            document.getElementById("checktext2").innerHTML = "密码不能小于6个字符";
            check = false;
        } else if (password.length > 16) {
            document.getElementById("checktext2").innerHTML = "密码不能大于16个字符";
            check = false;
        } else {
            document.getElementById("checktext2").innerHTML = "";
            check = true;
        }

        //手机号
        var reg = /^1[345678]\d{9}$/;
        var phone = document.getElementById("phone").value;
        if (phone == "") {
            document.getElementById("checktext3").innerHTML = "请输入手机号";
            check = false;
//					 } else if(!phone==reg){ 
//					  document.getElementById("checktext3").innerHTML ="输入有误，请重新输入！"; 
//					  check=false;
//					 } else if(phone.length > 10){
//					 	 document.getElementById("checktext3").innerHTML ="输入有误，请重新输入！"; 
//					  check=false;
        } else {
            document.getElementById("checktext3").innerHTML = "";
            check = true;
        }

        //验证码
        var font = document.getElementById("font").value;
        if (font == "") {
            document.getElementById("checktext4").innerHTML = "请输入验证码";
            check = false;
        } else {
            document.getElementById("checktext4").innerHTML = "";
            check = true;
        }
        return check;
    }

    function check() {
        var check = checkusrn();
        return check;

    }
    var yanzhengma;
    // 注册
    $('#next').click(function () {
        var code = $('#font').val();
        if(yanzhengma==code){
        $.ajax({
            url: "/register",
            type: "get",
            dataType: "json",
            data: {
                nickname: $('#username').val(),
                phone: $('#phone').val(),
                password: $('#password').val()
            },
            success: function (result) {
                alert("ok");
                if (result.msg == "ok") {
                    window.location.href = "/blibli_zhuceGOlogin.html";
                } else {
                    alert("注册失败");
                }
            }
        })
        }else{
            alert("验证码错误")
        }
    })
    // 发送
    $('#btn').click(function () {
        var phone = $("#phone").val();
        alert(phone)
        // isStop = setInterval("time()", 1000);
        $('#btn').attr("disabled", true);
        $.getJSON("http://localhost:8080/biu", {phone: phone,}, function (result) {
            if (result.code != null) {
                yanzhengma = result.code;
            } else {
                alert(result.msg);
            }
        })
    });
    // $("#next").click(function () {
    //     alert("我要注册")
    //     var code = $("#font").val();
    //     if(code==''){
    //         alert("验证码不能为空");
    //         return;
    //     }
    //     if(code == yanzhengma){
    //         alert("进入了");
    //         $.ajax({
    //             url:"/register",
    //             type:"get",
    //             dataType:"json",
    //             data:{
    //                 nickname:$('#username').val(),
    //                 phone:$('#phone').val(),
    //                 password:$('#password').val()
    //             },
    //             success:function (result) {
    //                 alert("ok");
    //                 if(result.msg == "ok"){
    //                     window.location.href="/blibli_login.html";
    //                 }else{
    //                     alert("注册失败");
    //                 }
    //             },
    //             error:function () {
    //                 alert("错误");
    //             }
    //         })
    //     }else{
    //         alert("验证码输入有错");
    //     }
    // });
    var sec = 30;
    var isStop = 0;
    function time() {
        sec--;
        if(sec==0){
            $('#btn').val("可以再次发送验证码")
            $('#btn').removeAttr("disabled");
            sec = 30;
            clearInterval(isStop);
        }else{
            $('#btn').val(sec+"S后可以重新发送")
        }
    }
</script>
</html>
